<script setup>
import { ref } from 'vue'
import { Mouse, Edit, Delete } from '@element-plus/icons-vue'
import ChannelEdit from './components/ChannelEdit.vue'
import request from '@/utils/request'
import { dayjs } from 'element-plus'
const channelList = ref([])
// 加载图标
const loading = ref(false)
// 弹窗
const dialog = ref()
//分页器
const pagination_com_data = ref({
  organizationName: '',
  page: 1,
  limit: 10,
  total: 0
})
const onSearch = () => {
  //重置页面
  pagination_com_data.value.page = 1
  getChannelList()
}
// 重置，将筛选条件清空，从第一页开始展示
const onReset = () => {
  pagination_com_data.value.page = 1
  pagination_com_data.value.organizationName = ''
  getChannelList()
}
//分页器
const handleSizeChange = (val) => {
  pagination_com_data.value.limit = val
  getChannelList()
}
const handleCurrentChange = (val) => {
  pagination_com_data.value.page = val
  getChannelList()
}
const getChannelList = async () => {
  loading.value = true
  request
    .post('/organization/page', {
      organizationName: pagination_com_data.value.organizationName,
      pageQuery: {
        limit: pagination_com_data.value.limit,
        page: pagination_com_data.value.page
      }
    })
    .then((res) => {
      channelList.value = res.data
      pagination_com_data.value.total = res.total
      loading.value = false
    })
}
getChannelList()
// 编辑
const onEditChannel = (row) => {
  dialog.value.open(row)
}
// 删除
const onDelChannel = async (row) => {
  await ElMessageBox.confirm('你确认删除该部门信息吗？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  // 传入删除id
  // await artDelChannelService(row.id)
  loading.value = true
  request
    .get('/organization/del', {
      params: {
        id: row.id
      }
    })
    .then(() => {
      ElMessage({ type: 'success', message: '删除成功' })
      getChannelList()
      loading.value = false
    })
}
// 添加
const onAddChannel = () => {
  dialog.value.open({})
}
// 回显刷新
const onSuccess = () => {
  getChannelList()
}

//选择队长弹窗
const Leader = ref(false)
const selectedRow = ref(null)
// 查看弹窗
const chooseHeader = (row) => {
  console.log(row) // 调试信息
  selectedRow.value = row
  Leader.value = true
  form.value.orgId = row.id
}

//数据
const form = ref({
  name: '',
  orgId: ''
})
//员工列表
const articleList = ref([])
const getArticleList = async () => {
  request
    .post('/employee/page', {
      organizationId: '',
      pageQuery: {
        limit: 99999,
        page: 1
      },
      searchName: ''
    })
    .then((res) => {
      articleList.value = res.data
    })
}
getArticleList()
//确认队长
const queryHeader = () => {
  request({
    url: '/organization/setOrgLeader',
    method: 'get',
    params: {
      orgId: form.value.orgId,
      userId: form.value.name
    }
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '添加成功'
    })
    Leader.value = false
    getChannelList()
  })
}
</script>

<template>
  <page-container class="page__channel" title="部门管理">
    <!-- 具名插槽写按钮 -->
    <template #extra>
      <el-button type="primary" @click="onAddChannel"> 添加部门 </el-button>
    </template>
    <el-form inline>
      <!-- el-form-item 一行 -->
      <el-form-item label="部门名称：">
        <!-- 下拉菜单和上面 params 绑定 -->
        <el-input
          v-model="pagination_com_data.organizationName"
          placeholder="请输入部门名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- data 配置数据 -->
    <!-- prop对应每一列的数据名 -->
    <el-table
      v-loading="loading"
      :data="channelList"
      style="width: 100%"
      height="550"
    >
      <!-- type="index" 设置序号 -->
      <el-table-column label="序号" width="100" type="index"> </el-table-column>
      <el-table-column
        label="部门名称"
        prop="organizationName"
      ></el-table-column>
      <el-table-column
        label="部门说明"
        show-overflow-tooltip
        prop="organizationDescription"
      ></el-table-column>
      <el-table-column label="创建时间" prop="createTm">
        <template #default="{ row }">
          <!-- {{ formatTime(row.createTm) }} -->
          {{ dayjs(row.createTm).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <!-- 插槽，row 就是 channelList 的一项，$index 下标 -->
        <template #default="{ row, $index }">
          <el-popover
            placement="top"
            :width="200"
            trigger="hover"
            content="选择队长"
          >
            <template #reference>
              <el-button
                :icon="Mouse"
                circle
                plain
                type="primary"
                @click="chooseHeader(row)"
              ></el-button>
            </template>
          </el-popover>
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditChannel(row, $index)"
          ></el-button>
          <el-button
            :icon="Delete"
            circle
            plain
            type="danger"
            @click="onDelChannel(row, $index)"
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination_com_data.page"
        v-model:page-size="pagination_com_data.limit"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination_com_data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹窗 -->
    <channel-edit ref="dialog" @success="onSuccess"></channel-edit>
    <!-- 队长弹窗 -->
    <el-dialog v-model="Leader" title="选择部门队长" width="500">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <!-- 下拉菜单和上面 params 绑定 -->
          <el-select v-model="form.name" filterable style="width: 240px">
            <el-option
              v-for="item in articleList"
              :key="item.id"
              :label="item.userName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Leader = false">取消</el-button>
          <el-button type="primary" @click="queryHeader"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </page-container>
</template>

<style lang="scss" scoped>
.page__channel {
  .pagination {
    height: 50px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
